import React, { Component } from 'react'
//引入关联redux和组件的connect
import { connect } from "react-redux";
//引入改变状态的方法
import { addTodoToPendding, penddingToFinished } from './redux/actions';

class Todolist extends Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div className='Todolist'>
                {/* input框+button按钮 */}
                <input type="text" ref="input" />
                <button onClick={() => {
                    var value = this.refs.input.value;
                    this.props.addTodo(value)
                    this.refs.input.value = ""
                }}>添加todo</button>
                <div>
                    <h3>正在进行</h3>
                    <div>
                        {
                            this.props.penddingTodos.map((ele, index) => {
                                return <div key={index}>
                                    <input type="checkbox" onClick={(e) => {
                                        e.preventDefault();
                                        this.props.finish(ele)
                                    }} />
                                    <span>{ele.text}</span>
                                </div>
                            })
                        }
                    </div>
                </div>
                <div>
                    <h3>已完成</h3>
                    <div>
                        {
                            this.props.finishedTodos.map((ele, index) => {
                                return <div key={index}>
                                    <input type="checkbox" onClick={() => {

                                    }} />
                                    <span>{ele.text}</span>
                                </div>
                            })
                        }
                    </div>
                </div>
            </div>
        );
    }
}

// 改变状态方法
function mapActionToProps(dispatch) {
    return {
        //给点击事件传值
        addTodo: (value) => { dispatch(addTodoToPendding(value)) },
        finish: (todo) => { dispatch(penddingToFinished(todo)) }
    }
}
// 状态返回值
function mapStateToProps(rootReducer) {
    return {
        //接受改变完的数据
        penddingTodos: rootReducer.todoReducer.penddingList,
        finishedTodos: rootReducer.todoReducer.finishedList
    }
}

export default connect(mapStateToProps, mapActionToProps)(Todolist);